<script setup>
import {onMounted, ref } from "vue";
import router from "@/router";
import axios from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";

onMounted(()=>{
  let breadcrumbData=["系统管理","角色管理","新增角色"];
  localStorage.setItem('breadcrumb', JSON.stringify(breadcrumbData));
  loadUser();
  handleMenuSelect(1);
})


const roleId = new URLSearchParams(window.location.search).get('roleId');

const AddRoleUserForm = ref({
  roleName: '',
  roleId: roleId || '',
  userName:'',
  status: '1',
  remark: '',
  MIds: [],
  RId: '',
  CIds: [],
})

const handleCheckChange = (data, checked, indeterminate) => {
  console.log(data);
  console.log(checked);
  console.log(indeterminate);

  if (checked) {
    // 检查 `menuId` 是否已经在 `MIds` 数组中
    if (!AddRoleUserForm.value.MIds.includes(data.menuId)) {
      // 如果不存在，则添加
      AddRoleUserForm.value.MIds.push(data.menuId);
    }
  } else {
    // 如果取消选中，则从 `MIds` 中移除 `menuId`
    const index = AddRoleUserForm.value.MIds.indexOf(data.menuId);
    if (index > -1) {
      AddRoleUserForm.value.MIds.splice(index, 1);
    }
  }
  console.log(AddRoleUserForm.value.MIds);
};

const roleMemberArr = ref([])

const loadUser = () => {
  axios.get(getBaseURL(4)+'/v1/user/selectAll')
   .then(res => {
      if (res.data.code === 2000) {
        roleMemberArr.value = res.data.data.map(item => {
          return {
            value: item.userId,
            userName: item.userName
          }
        })
      }
    }).catch(error => {ElMessage.error(error.message)})
};

const addRoleUser = () => {
  axios.post(getBaseURL(4)+'/v1/userRole/addRoleUser',qs.stringify(AddRoleUserForm.value))
   .then(res => {
     if (res.data.code === 2000) {
       ElMessage.success('新增角色成功！')
     }else {
       ElMessage.error('新增角色失败！')
     }
   }).catch(error => {ElMessage.error(error.message)})
};
const showCheckbox = ref(true)
const currentTreeData = ref([])
const menuList=
  [
    {
      label: '首页',
      menuId: 1,
    },
    {
      label: '病案管理',
      menuId: 2,
      children:
          [
            {
              label: '住院病案首页管理',
              menuId:8
            }
          ]
    },
    {
      label: '病案复印管理',
      menuId: 3,
      children:
          [
            {
              label: '住院病案复印管理',
              menuId:9
            },
            {
              label: '基础信息管理',
              menuId:10
            },
            {
              label: '复印用途模板管理',
              menuId:11
            },
            {
              label: '复印内容管理',
              menuId:12
            }
          ]
    },
    {
      label: '病案借阅管理',
      menuId: 3,
      children:
          [
            {
              label: '借阅登记',
              menuId:13
            },
            {
              label: '借阅审核出库',
              menuId:14
            },
            {
              label: '借阅病案归还',
              menuId:15
            },
          ]
    },
    {
      label: '病案统计分析',
      menuId: 5,
      children:
          [
            {
              label: '住院病案复印统计',
              menuId:16
            },
            {
              label: '借阅登记统计',
              menuId:17
            },
            {
              label: '病案归还统计',
              menuId:18
            },
          ]
    },
    {
      label: '费用管理',
      menuId: 6,
      children:
          [
            {
              label: '住院复印费用查询',
              menuId:19
            },
            {
              label: '月度账单统计查询',
              menuId:20
            },
          ]
    },
    {
      label: '系统管理',
      menuId: 7,
      children:
          [
            {
              label: '字典管理',
              menuId:21
            },
            {
              label: 'ICD-10管理',
              menuId:22
            },
            {
              label: '问答管理',
              menuId:23
            },
            {
              label: '角色管理',
              menuId:24
            },
            {
              label: '登录日志',
              menuId:25
            },
          ]
    },
]

const selectMenuIndex = ref('1')

const handleMenuSelect = (index) => {
  showCheckbox.value = index == 1;
  currentTreeData.value = menuList;
  selectMenuIndex.value = index;
}

const RIDListArr = ref([
  { id: 1, label: '全部数据' },
  { id: 2, label: '部门数据' },
  { id: 3, label: '部门及下属数据' },
  { id: 4, label: '个人及下属数据' },
  { id: 5, label: '个人数据' },
]);

const CIDListArr = ref([
  { id: 1, label: '新增' },
  { id: 2, label: '查看' },
  { id: 3, label: '编辑' },
  { id: 4, label: '删除' },
  { id: 5, label: '导出' },
  { id: 6, label: '打印' }
]);


const defaultProps = {
  children: 'children',
  label: 'label'
}

const nodeKey = 'menuId'





</script>

<template>
  <ElForm v-model="AddRoleUserForm">
    <ElCard style="width: 98%;height: 150px;">
      <ElRow gutter="20">
        <ElCol :span="8">
          <ElFormItem label="角色名称">
            <ElInput v-model="AddRoleUserForm.roleName"/>
          </ElFormItem>
        </ElCol>
        <ElCol :span="8">
          <ElFormItem label="角色成员">
            <ElSelect v-model="AddRoleUserForm.userName">
              <ElOption v-for="item in roleMemberArr" :key="item.value" :value="item.userName"></ElOption>
            </ElSelect>
          </ElFormItem>
        </ElCol>
        <ElCol :span="8">
          <ElFormItem label="启用状态">
            <ElRadioGroup v-model="AddRoleUserForm.status">
              <ElRadio label="1" selected>启用</ElRadio>
              <ElRadio label="0">禁用</ElRadio>
            </ElRadioGroup>
          </ElFormItem>
        </ElCol>
      </ElRow>
      <ElFormItem label="角色描述">
        <ElInput v-model="AddRoleUserForm.remark"/>
      </ElFormItem>
      <ElRow gutter="20">
      </ElRow>
    </ElCard>
    <ElCard style="width: 98%;height: 65vh;overflow: auto;">
      <div style="">
        <span style="display: inline-block;float: left;margin-left: 10px;font-size: 18px;color: black;font-weight: bold;width: 200px;text-align: left;border-right: 2px solid #F0F2F5;border-bottom: 2px solid #F0F2F5;line-height: 40px;">权限操作</span>
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
          <span style="font-size: 18px; color: black;margin-left: 10px; font-weight: bold; width: 75%; text-align: left; border-bottom: 2px solid #F0F2F5; line-height: 40px;">菜单列表</span>
          <div style="padding-bottom: 10px;">
            <ElButton color="blue" type="primary" @click="addRoleUser" style="margin-right: 10px; color: white;">保存</ElButton>
            <ElButton color="blue" type="primary" @click="router.push('/system/user')" style="color: white;">返回</ElButton>
          </div>
        </div>
      </div>
      <div>
        <ElMenu style="clear: both;width: 210px;height: 72vh;float: left;" @select="handleMenuSelect">
          <ElMenuItem index="1">菜单权限</ElMenuItem>
          <ElMenuItem index="2">数据权限</ElMenuItem>
          <ElMenuItem index="3">操作权限</ElMenuItem>
        </ElMenu>
        <ElTree
            style="float: left;margin-left: 20px;width: 300px;"
            :data="currentTreeData"
            :props="defaultProps"
            :node-key="nodeKey"
            :default-expand-all="true"
            :expand-on-click-node="false"
            :show-checkbox=showCheckbox
            @check-change="handleCheckChange"
        >
        </ElTree>
        <ElRadioGroup style="display: flex;flex-direction: column;align-items: flex-start;margin-left: 20px;width: 200px;" v-model="AddRoleUserForm.RId">
          <ElRadio v-if="selectMenuIndex === '2'" size="large" v-for="item in RIDListArr" :key="item.id" :value="item.id">{{item.label}}</ElRadio>
        </ElRadioGroup>
        <ElCheckboxGroup style="display: flex;flex-direction: row;align-items: flex-start;margin-left: 20px;width: 200px;" v-model="AddRoleUserForm.CIds">
          <ElCheckbox v-if="selectMenuIndex === '3'" size="large" v-for="item in CIDListArr" :key="item.id" :label="item.id">{{item.label}}</ElCheckbox>
        </ElCheckboxGroup>
      </div>
    </ElCard>
  </ElForm>
</template>


<style scoped>

</style>
